<!--{*
 * モンスターデータ | 検索結果
 *
 * LICENSE: Miracle Maple by Mirage is licensed
 * under a Creative Commons 表示-非営利-継承 2.1 日本 License.
 *
 * @category   monster
 * @package    maple-story.jp
 * @version    8.0.0
 * @link       http://maple-story.jp/モンスター/:name/
 * @since      File available since Release 8.0.0
 * @copyright  Copyright 2011 Miracle Maple
 * @license    http://creativecommons.org/licenses/by-nc-sa/2.1/jp/     Creative Commons BY-NC-SA
 *}-->
<script>
$(function() {
	$("#slider-range").slider({
		range: true,
		min: 1,
		max: 200,
		values: ["<!--{$minLevel}-->", "<!--{$maxLevel}-->"],
		slide: function(event, ui) {
			$("#level-range").val("Lv " + ui.values[0] + " - " + ui.values[1]);
		}
	});
	$("#level-range").val("Lv " + $("#slider-range").slider("values", 0) +
		" - " + $("#slider-range").slider("values", 1));
});
</script>

<article class="paper">
    <h1><!--{$articleTitle}--></h1>
    <section id="search-config">
        <h2>検索条件</h2>
        <dl>
        	<dt id="condition-keyword">キーワード</dt>
            <dd>検索するキーワードを入力してください<br>
                <form>
                    <input type="text" id="search-keyword" name="keyword" placeholder="キーワード" maxlength="50">
                    <input type="button" name="set-keyword" class="set-value" value="設定">
                </form>
            </dd>
        </dl>
        <dl>
        	<dt id="condition-level">Lv <!--{$minLevel}--> - <!--{$maxLevel}--></dt>
            <dd>
                <form>
                    <label for="level-range">レベル : </label>
                    <input type="text" id="level-range" readonly />
                    <input type="button" name="set-level" class="set-value" value="設定">
                </form>
                <div id="slider-range"></div>
            </dd>
        </dl>
        <!--
        <dl>
        	<dt>生息エリア</dt>
            <dd>
            <form>
                <input type="text" id="search-form-area" name="keyword" maxlength="50">
                <input type="button" name="set-keyword" value="設定">
            </form>
            </dd>
        </dl>
        -->
        <dl class="element-attr">
        	<dt id="search-elem-F">火—</dt>
        	<dt id="search-elem-S">毒—</dt>
        	<dt id="search-elem-I">氷—</dt>
            <dt id="search-elem-L">雷—</dt>
            <dt id="search-elem-H">聖—</dt>
        </dl>
        <dl class="clear">
        	<dt id="condition-option">オプション</dt>
            <dd>
            <form>
                <h3>モンスター 特殊要素</h3>
                <!--<label><input type="checkbox" name="search-option" value="normal"> 通常モンスター</label>&nbsp;
                <br>-->
                <label><input type="checkbox" name="search-option" value="first"> 先制攻撃</label>&nbsp;
                <label><input type="checkbox" name="search-option" value="deadly"> 1 / 1 攻撃</label>&nbsp;
                <label><input type="checkbox" name="search-option" value="boss"> ボス</label>&nbsp;
                <label><input type="checkbox" name="search-option" value="undead"> アンデッド</label>&nbsp;
                <h3>レアアイテムドロップ率</h3>
                <label><input type="radio" name="search-option-rare" value="" checked="checked"> すべて</label>&nbsp;
                <label><input type="radio" name="search-option-rare" value="1"> LEVEL 1 (通常)</label>&nbsp;
                <label><input type="radio" name="search-option-rare" value="2"> LEVEL 2 (高い)</label>&nbsp;
                <label><input type="radio" name="search-option-rare" value="3"> LEVEL 3 (最高)</label>&nbsp;
                <br>
                <p><input type="button" name="set-option" class="set-value" value="設定"></p>
            </form>
            </dd>
        </dl>
        <dl>
        	<dt id="condition-sort" class="search-available">並び順</dt>
            <dd>
            <form>
                <label><input type="radio" name="search-sort" value="level asc" checked="checked"> レベルの低い順</label>&nbsp;
                <label><input type="radio" name="search-sort" value="name asc"> 五十音順</label>&nbsp;
                <label><input type="radio" name="search-sort" value="exp desc"> 経験値の高い順</label>&nbsp;
                <input type="button" name="set-sort" class="set-value" value="設定">
            </form>
            </dd>
        </dl>
    </section>
    <section class="result-list">
    	<h2>検索結果 <span id="result-desc">
        <!--{if $monsterCount > 0}-->
        (<!--{$monsterCount}--> 件のモンスターが該当しました)
        <!--{else}-->
        (該当モンスターなし)
        <!--{/if}-->
        </span></h2>
        <ul class="button">
        <!--{foreach from=$monsters item=monster}-->
            <li data-id="mob-<!--{$monster->id}-->" data-elem-attr="<!--{$monster->element_attribute}-->">
            	<a href="/monster/<!--{$monster->id}-->/<!--{$monster->name|urlencode}-->/" title="<!--{$monster->name}-->">
                	<div class="shape" style="background-image: url(http://maple-story.info/monster/<!--{$monster->wid}-->/stand0.png);"></div>
                    <span class="level value">Lv. <!--{$monster->level}--></span>
                    <div class="monster-name"><!--{$monster->name}--></div>
                </a>
            </li>
        <!--{/foreach}-->
        </ul>
    </section>
    <div class="clear"></div>
</article>
